const express = require('express');
const app = express()
const Vue = require('vue');
const vue3Compiler = require('vue/compiler-ssr');
const renderer = require('@vue/server-renderer')

const vueapp = {
    template: `
    <div>
      <h1 @click='add'>Hello, SSR!</h1>
      <ul>
        <li v-for="item in items" :key="item">{{ item }}</li>
      </ul>
    </div>
  `,
    data() {
        return {
            items: ['Item 1', 'Item 2', 'Item 3']
        }
    },
    methods: {
        add() {
            this.items.push(`Item ${this.items.length + 1}`);
        }
    }
}

// 读取vue文件，编译成js代码
vue3Compiler.ssrRender = new Function('require', vue3Compiler.comple(template).code)(require)

app.get('/', async (req, res) => {
    let vapp = Vue.createSSRApp(vueapp)
})

app.listen(3000, () => {
    console.log('Server is running on port 3000');
})